import React from 'react';
import {inject, observer} from 'mobx-react';
import { WeaErrorPage, WeaTools,WeaSearchGroup,WeaTop,WeaTab,WeaRightMenu,WeaSelect,WeaNewScroll,WeaBrowser,WeaButton,WeaLocaleProvider} from 'ecCom';
import {Row,Col,Input,Tabs,Button,Alert,Spin,Icon,Form,Modal,Tooltip} from 'antd';
import {observable,action,toJS} from 'mobx';
import DatePicker from '../myWorkPlan/rightContainer/rightTab/datePicker/DatePicker';
const ButtonGroup = Button.Group;
import moment from 'moment';
const getLabel = WeaLocaleProvider.getLabel;

@inject('workPlanViewListStore')
@observer
class RightTab extends React.Component {
  constructor(props) {
    super(props);

  }
  componentWillUnmount() {
    const { setParams } = this.props.workPlanViewListStore;
    setParams({hasCommonGroupVisible: false});
  }

  render() {
    // const {isAllWorkPlan} = this.props
    // let {status,getRightMenu,onRightMenuClick,changeTimeType,doUpdateCalender,workplanPreviewTable,
    //   typeOption,hasBrowserVisible,hasCommonGroupVisible,hasMyAttentionVisible,getComomnCalendarData,
    //   setStatusParams,changeType,getAttentionData} = this.props.workPlanViewListStore
    let {status,changeTimeType,workplanPreviewTable,typeOption,hasBrowserVisible,hasCommonGroupVisible,
          hasMyAttentionVisible,setStatusParams,changeType} = this.props.workPlanViewListStore
    // const {loading,timeType,userList,tabOptions,selected,showCreateDialog,date,isShare,objType,useMap,
    //   weekstartday,workPlanShow,objDepts,objSubs,objHrms,attentionData} = toJS(status);
    const {timeType,tabOptions,selected,date,objType,weekstartday,objDepts,objSubs,objHrms,attentionData} = toJS(status);
    let typeOptions = toJS(typeOption);
    // let tabOptionsJoJS = toJS(tabOptions);
    // tabOptions.unshift({key: '-9900',showname: '全部'});
    // let typeOptions = [{key: '1', showname: `${getLabel(27511,'部门')}`},{key: '2', showname: `${getLabel(33553,'分部')}`},{key: '3', showname: `${getLabel(179,'人力资源')}`},]
    let browseParams = objType==2 ?{
      "dataParams":{},
      "hasAddBtn":false,
      "hasAdvanceSerach":true,
      "isAutoComplete":1,
      "isDetail":0,
      "isMultCheckbox":false,
      "isSingle":false,
      "linkUrl":"/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=subcompany&id=",
      "tabs":[
          {
              "dataParams":{
                  "list":"1"
              },
              "key":"1",
              "name":`${getLabel(130619,'按列表')}`,
              "selected":false
          },
          {
              "key":"2",
              "name":`${getLabel(18770,'按组织结构')}`,
              "selected":false
          }
      ],
      "title":`${getLabel(33553,'分部')}`,
      "type":"194",
      "viewAttr":2,
      "replaceDatas":objSubs
  }
:objType==1 ?{
      "dataParams":{},
      "hasAddBtn":false,
      "hasAdvanceSerach":true,
      "isAutoComplete":1,
      "isDetail":0,
      "isMultCheckbox":false,
      "isSingle":false,
      "linkUrl":"/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=department&id=",
      "tabs":[
          {   "isSearch":false,
              "key":"2",
              "name":`${getLabel(18770,'按组织结构')}`,
              "selected":false
          },
          {
              "dataParams":{
                  "list":"1"
              },
              "isSearch":true,
              "key":"1",
              "name":`${getLabel(130619,'按列表')}`,
              "selected":false
          }
        
      ],
      "title":`${getLabel(27511,'部门')}`,
      "type":"57",
      "viewAttr":2,
      "replaceDatas":objDepts
  }:{
      hasAddBtn:false,
      hasAdvanceSerach:true,
      isAutoComplete:1,
      isDetail:0,
      isMultCheckbox:false,
      isSingle:false,
      linkUrl:"/hrm/resource/HrmResource.jsp?id=",
      quickSearchName:"",
      title:`${getLabel(83496,'多人力资源')}`,
      type:"17",
      viewAttr:2,
      replaceDatas:objHrms
      
  }
  // `本${timeType=='week'?'周':timeType=='month'?'月':'日'}`
  let name = '';
  if(timeType=='week')name=`${getLabel(15539,'本周')}`
  if(timeType=='month')name=`${getLabel(15541,'本月')}`
  if(timeType=='day')name=`${getLabel(15537,'今天')}`
    return (
    	<div className="myWorkplan-right-tab" >
            <span style={{display:'inline-block',padding:'16px 10px 17px 24px',lineHeight:'12px'}}>{getLabel(16094,'日程类型')}</span>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@8zvexz`} multiple style={{paddingRight: 10, width: 100}} dropdownStyle={{maxWidth: '200px'}} options={tabOptions} value={selected} onChange={this.changeOptions}/>
            <ButtonGroup ecId={`${this && this.props && this.props.ecId || ''}_ButtonGroup@2mmefw`} style={{marginBottom:'2px'}}>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rs46a2`} type={timeType=='day'?'primary':'ghost'}  onClick={()=>changeTimeType('day')}>{getLabel(390,'日')}</Button>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkqnau`} type={timeType=='week'?'primary':'ghost'} onClick={()=>changeTimeType('week')}>{getLabel(1926,'周')}</Button>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@275m3p`} type={timeType=='month'?'primary':'ghost'} onClick={()=>changeTimeType('month')}>{getLabel(33452,'月')}</Button>
            </ButtonGroup>
            <DatePicker ecId={`${this && this.props && this.props.ecId || ''}_DatePicker@2x6cxp`} type={timeType} className="picker" date={date} weekstartday={weekstartday} onChange={this.datePickerOnchange} ref="workplan-tab-picker"/>
            {name && <WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@97bkkl`} type="ghost" style={{}} text={name} disabled={false} onClick={this.doSerch} /> }
            <div style={{display:'inline-block',width:workplanPreviewTable ? '64px' : '36px', position:'relative'}}>
            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@7rbwkz`} placement="bottom" title={getLabel(354,'刷新')}>
              <span className="icon-coms-Refresh" style={{cursor:'pointer',padding:'0 10px',color:'#B2B2B2',fontSize:'16px',display:'inline-block',position:'absolute',top:'-12px'}} onClick = {this.doRefresh}></span>
            </Tooltip>
            </div>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@84cc6r`} style={{width:'100px'}} dropdownStyle={{maxWidth: '200px'}}  options={typeOptions} value={objType} onChange={(value)=>this.changeType(value)}/>
            {hasBrowserVisible && !hasCommonGroupVisible&& !hasMyAttentionVisible  &&<div style={{display:'inline-block',position:'absolute',top:'8px'}}>
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@z74nl8`} className='workplan-right-bro' {...browseParams} onChange={(ids, names, datas)=>{this.onChangeBrowser(ids, names, datas)
                  }} inputStyle={{width:'220px',height:'30px',overflowY:'hidden'}} />
            </div>}
            {!hasBrowserVisible && hasCommonGroupVisible && !hasMyAttentionVisible && <div className='workplan-changyongzu' style={{}} onClick={() => {}}>
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@70xtx2`} // 常用组
                type={17}
                isSingle={false}
                hideOps={true}
                customIcon={'icon-coms-down2'}
                hasAddGroup
                // addOnClick={(values)=> console.log('自定义btn 点击的回调', values)}
                inputStyle={{width: 231,height: 30}}
                onChange={(ids, names, datas)=> {setStatusParams({commonIds: ids},changeType)}}
              />
            </div>}
            {!hasBrowserVisible && !hasCommonGroupVisible && hasMyAttentionVisible &&<div className='workplan-myAttention'>
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@hv6wig`}
                  type={17}
                  textDecoration={true}
                  customized
                  memorise // 添加默认值
                  inputStyle={{width: 200}}
                  onChange={(ids, names, datas)=> this.addAttentionBrowser(ids)}
                  isSingle={false}
                  replaceDatas={attentionData}
                >
                   <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@22bkvz`}>{getLabel('502011','维护关注人') }</Button>
                </WeaBrowser>
            </div>}
    	</div>
    )
  }

  doRefresh = ()=>{
    let {status,doUpdateCalender,changeGetCalendarData} = this.props.workPlanViewListStore
    let {workPlanShow} = toJS(status);
    // workPlanShow == 'calender' && doUpdateCalender(true);
    workPlanShow == 'list' && changeGetCalendarData();
  }

  doSerch = ()=>{
    // let {status,getRightMenu,onRightMenuClick,changeTimeType,search,changeGetCalendarData} = this.props.workPlanViewListStore
    let { search } = this.props.workPlanViewListStore
    // const {loading,timeType,workPlanShow} = toJS(status);
    search()
  }

  onChangeBrowser =(ids, names, datas)=>{
    this.props.workPlanViewListStore.changeBro(datas);
  }

  // 添加关注人
  addAttentionBrowser = (ids, names, datas) => {
    let { updateAttention, getComomnCalendarData } = this.props.workPlanViewListStore
    updateAttention(ids,getComomnCalendarData);
  }

  changeType = (value)=>{
    // const {setParams,setStatusParams,getComomnCalendarData,getAttentionData,changeType} = this.props.workPlanViewListStore;
    const {setParams,setStatusParams,changeType} = this.props.workPlanViewListStore;
    if(value === '1' || value === '2' || value === '3') { // 分部，部门，人力资源
      setParams({hasBrowserVisible: true,hasCommonGroupVisible: false,hasMyAttentionVisible: false},
        this.props.workPlanViewListStore.changeType(value)
        );
        setStatusParams({objType: value});
    }else if(value === '6') { // 常用组
      setParams({hasBrowserVisible: false,hasCommonGroupVisible: true,hasMyAttentionVisible: false});
      setStatusParams({objType: value},changeType);
    }else if(value === '7') { //我的关注
      setParams({hasBrowserVisible: false,hasCommonGroupVisible: false,hasMyAttentionVisible: true});
      setStatusParams({commonIds: [],objType: value},changeType)
    }else{
      setParams({hasBrowserVisible: false,hasCommonGroupVisible: false,hasMyAttentionVisible: false});
      setStatusParams({commonIds: [],objType: value},changeType)
    }
  }

  changeOptions = (value)=>{
    this.props.workPlanViewListStore.changeOptions(value,'status');
  }

  datePickerOnchange = (momentValue,value)=>{
    let copyMoment = '',copyDate ='';
    if(momentValue._isAMomentObject){
      let copy = moment(momentValue);
      copyDate = copy.format("YYYY-MM-DD")
    }
    if(typeof(value) === 'string'){
      this.props.workPlanViewListStore.changeOptions(value,'calendarParams',momentValue);
    }else{
      this.props.workPlanViewListStore.changeOptions(copyDate,'calendarParams',momentValue);
    }
  }

  // onClick = (type)=>{//切换一览表
  //   //type == list 是切换到一览表
  //   this.props.workPlanViewListStore.setParams({workplanPreviewTable: true});    
  //   this.props.workPlanViewListStore.changeShow(type)    
  // }

}

export default RightTab

